<template>
  <view>
    <view class="infobox4" @click="back" :style="navTitleModuleStyle">
      <view class="block1">
        <image
          :src="
            styleType == 'white'
              ? require('@/static/img14.png')
              : require('@/static/img33.png')
          "
          mode=""
        ></image>
      </view>
    </view>
    <!-- #ifdef MP-WEIXIN -->
    <view
      class="infobox5"
      :style="{
        top: `${menuInfo.top + 6}px`,
        color: `${styleType == 'white' ? '' : '#1F1F1F'}`,
      }"
    >
      {{ title }}
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view
      class="infobox5"
      :style="{
        top: `48rpx`,
        color: `${styleType == 'white' ? '' : '#1F1F1F'}`,
      }"
    >
      {{ title }}
    </view>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view class="" v-if="noheight" style="height: 100rpx"> </view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view
      class=""
      v-if="noheight"
      :style="{ height: `${menuInfo.top + menuInfo.height}px` }"
    >
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
import { back } from "@/utils/wxAPI.js";
export default {
  name: "navTitle",
  props: {
    title: {
      type: String,
      default: "",
    },
    styleType: {
      type: String,
      default: "white",
    },
    noheight: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      menuInfo: {},
      navTitleModuleStyle: "",
    };
  },
  async mounted(options) {
    // #ifdef MP-WEIXIN
    this.menuInfo = getApp().globalData.menuInfo;
    this.navTitleModuleStyle = `top:${this.menuInfo.top + 6}px`;
    // #endif
  },
  methods: {
    back() {
      back();
    },
  },
};
</script>

<style lang="scss" scoped>
.infobox4 {
  position: fixed;
  width: 80rpx;
  height: 80rpx;
  top: 50rpx;
  left: 32rpx;
  z-index: 999;

  .block1 {
    width: 40rpx;
    height: 40rpx;
  }
}

.infobox5 {
  text-align: center;
  color: #fff;
  font-weight: bold;
  width: 100%;
  position: absolute;
  font-size: 36rpx;
  z-index: 99;
}

image {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>
